<template>
  <div>
    <!-- 导航栏 start -->
    <van-nav-bar title="名企专区" left-arrow fixed  @click-left="$router.back()"/><!-- 导航栏 end -->

    <!-- 列表 start -->
    <van-list class="famous-list content-top">
      <!-- 循环 -->
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="firm" @click="onCompany(item)">
          <p>
            <img :src="item.logoUrl" v-if="true"/>
            <b>{{item.companyName}}</b>
            <span><van-icon name="fire" size="14" color="#ff3030" />{{item.hot}}</span>
          </p>
          <p>
            <span>{{item.companyType}}</span>
            <span>{{item.trade}}</span>
            <span>{{item.area}}}</span>
          </p>
        </div>
        <div class="jobs">
          <p v-for="job,index in item.jobs" :key="index" @click="onJobInfo(job)">
            <span>{{job.jobName}}</span>
            <span>{{job.salary}}</span>
          </p>
          <p @click="onCompany(item)">
            <span>查看全部职位</span>
          </p>
        </div>
      </div>
    </van-list>
    <!-- 列表 end -->
  </div>
</template>

<script>
import { NavBar, List, Icon } from "vant";
export default {
  name: "VipFirm",
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Icon.name]: Icon,
  },
  // 定义属性
  data() {
    return {
			list:[]
		};
  },
	mounted(){
		this.$api.get('/Adv/GetFamousCompanyList').then(res=>{
			this.list = res.response;
		})
	},
  // 方法集合
  methods: {
		onCompany(item){
			this.$router.push({name:'person-companyinfo',query: { companyid: item.companyID },})
		},
		onJobInfo(item){
			this.$router.push({name:'person-jobinfo',query:{jobid:item.jobID}})
		}
	},
};
</script>

<style scoped>
.famous-list {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
}

.famous-list .item {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #fff;
}

.famous-list .item + .item {
  margin-top: 10px;
}

.famous-list .item .firm {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}

.famous-list .item .firm p:nth-child(1) {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 60px;
  padding: 0 0 0 72px;
  margin-bottom: 15px;
}

.famous-list .item .firm p:nth-child(1) img {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
}

.famous-list .item .firm p:nth-child(1) b {
  font-size: 17px;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.famous-list .item .firm p:nth-child(1) span {
  margin-top: 4px;
  font-size: 14px;
  color: #ff3030;
}

.famous-list .item .firm p:nth-child(1) span i {
  margin-right: 4px;
}

.famous-list .item .firm p:nth-child(2) {
  display: flex;
}

.famous-list .item .firm p:nth-child(2) span {
  padding: 3px 6px;
  border-radius: 3px;
  margin-right: 6px;
  background-color: rgba(0, 0, 0, 0.03);
  font-size: 12px;
  color: #666;
}

.famous-list .item .jobs {
  display: flex;
  flex-direction: column;
}

.famous-list .item .jobs p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  border-top: 1px solid #f9f9f9;
}

.famous-list .item .jobs p:before {
  content: "";
  display: flex;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 0 8px 0 2px;
  background-color: #c8c8c8;
}

.famous-list .item .jobs p span:nth-of-type(1) {
  display: -webkit-box;
  flex: 1;
  font-size: 15px;
  color: #222;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.famous-list .item .jobs p span:nth-of-type(2) {
  display: flex;
  justify-content: flex-end;
  width: 100px;
  font-size: 15px;
  font-weight: 500;
  color: #05a6f0;
}

.famous-list .item .jobs p:last-child:before {
  content: "";
  display: none;
}

.famous-list .item .jobs p:last-child span:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 15px;
  color: #05a6f0;
}
</style>
  